<template>
  <div class="head-box">
    <div class="head-left">
      <div class="dropdown-box1">
        <el-select
          v-model="chooseTimeType"
          :suffix-icon="CaretBottom"
          class="m-2"
        >
          <el-option
            v-for="item in chooseTimeTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="dropdown-box2">
        <el-date-picker
          v-model="currentDateTime"
          type="date"
          @visible-change="isVisibleDate"
          @change="changeCurrentDateTime"
          :clearable="false"
          :prefix-icon="dynamicIcon"
          v-if="chooseTimeType === 'date'"
        />
        <el-date-picker
          v-model="chooseWeek"
          type="week"
          @visible-change="isVisibleDate"
          :clearable="false"
          :prefix-icon="dynamicIcon"
          @change="changeWeek"
          v-if="chooseTimeType === 'week'"
        />
        <el-date-picker
          v-model="chooseMoth"
          type="month"
          @visible-change="isVisibleDate"
          :clearable="false"
          :prefix-icon="dynamicIcon"
          v-if="chooseTimeType === 'month'"
        />
        <el-date-picker
          v-model="chooseYear"
          type="year"
          @visible-change="isVisibleDate"
          :clearable="false"
          :prefix-icon="dynamicIcon"
          v-if="chooseTimeType === 'year'"
        />
      </div>
    </div>
    <div class="head-mid">
      <img src="@/assets/imgs/bigTitle-V2.png" alt="" />
    </div>
    <div class="head-right">
      <div class="page-msg">
        <div class="time-box">{{ cureentTime }}</div>
        <div class="weather-box">32ºC 局部多云</div>
        <img src="@/assets/imgs/icon-duoyun-V2.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed,onBeforeUnmount } from "vue";
import { CaretBottom, CaretTop } from "@element-plus/icons-vue";
import dayjs from "dayjs";

const emit=defineEmits(['changeCurrentDateTime'])
const currentDateTime = ref(dayjs().format("YYYY-MM-DD HH:mm:ss"));
const changeCurrentDateTime=(val)=>{
  currentDateTime.value = dayjs(val).format("YYYY-MM-DD HH:mm:ss")
  emit('changeCurrentDateTime',currentDateTime.value)
}



const cureentTime = ref("");
const timeout1 = ref();

const getCurrentTime = () => {
  timeout1.value = setTimeout(() => {
    cureentTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
    getCurrentTime();
  }, 1000);
};
getCurrentTime();

const chooseTimeType = ref("date");
const chooseTimeTypeList = ref([
  {
    value: "date",
    label: "按日查询",
  },
  // {
  //   value: "week",
  //   label: "按周查询",
  // },
  // {
  //   value: "month",
  //   label: "按月查询",
  // },
  // {
  //   value: "year",
  //   label: "按年查询",
  // },
]);
const chooseDate = ref(dayjs().format("YYYY-MM-DD"));
const chooseWeek = ref(dayjs().format("YYYY-MM-DD"));
const chooseMoth = ref(dayjs().format("YYYY-MM-DD"));
const chooseYear = ref(dayjs().format("YYYY-MM-DD"));
const changeWeek = (val) => {
  console.log("val", val, chooseWeek.value);
};

const showDateIcon = ref(false);
const isVisibleDate = (val) => {
  showDateIcon.value = val;
};
const dynamicIcon = computed(() => {
  if (!showDateIcon.value) {
    return CaretBottom;
  } else {
    return CaretTop;
  }
});
onBeforeUnmount(() => {
  clearTimeout(timeout1.value);
});
</script>

<style scoped lang="scss">
.head-box {
  display: flex;
  height: 107px;
  //   background-image: url(../../assets/imgs/headBack.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .head-left {
    flex: 1;
    display: flex;
    padding-top: 51px;
    // padding-left: 60px;
    box-sizing: border-box;
    .dropdown-box1 {
      ::v-deep(.el-select) {
        width: 157px;
      }
      ::v-deep(.el-select__wrapper) {
        border-radius: 4px 4px 4px 4px;
        // border: 1px solid #D5D5D5;
      }
      ::v-deep(.el-select__placeholder) {
        color: #333333;
        font-weight: 600;
      }
      ::v-deep(.el-select__caret) {
        color: rgba(201, 201, 201, 1);
      }
    }
    .dropdown-box2 {
      position: relative;
      margin-left: 4px;
      .icon-box {
        position: absolute;
        bottom: 30px;
        right: 15px;
      }
      ::v-deep(.el-input) {
        width: 226px;
      }
      ::v-deep(.el-input__inner) {
        color: #333333;
        font-weight: 600;
      }
      ::v-deep(.el-input__prefix) {
        // display: none;
        position: absolute;
        right: 0;
      }
    }
  }
  .head-mid {
    flex: 1;
    display: flex;
    justify-content: center;
    height: 40px;
    margin-top: 42px;
    box-sizing: border-box;
    img {
      width: 158px;
      height: 30px;
    }
  }
  .head-right {
    position: relative;
    flex: 1;
    padding-top: 50px;
    box-sizing: border-box;

    .page-msg {
      position: absolute;
      left: -120px;
      display: flex;
      align-items: center;
      .time-box {
        font-weight: bold;
        font-size: 18px;
        color: #298bff;
      }
      .weather-box {
        margin: 0 8px 0 20px;
        font-weight: 600;
        font-size: 14px;
        color: #298bff;
      }
      img {
        width: 20px;
        height: 14px;
      }
    }
  }
}
</style>
